<template>
    <!--

    -->
    <div class="system-dict p-4 bg-white rounded-lg shadow-sm border border-gray-200">
        <!-- Header -->
        <h2 class="text-lg font-medium pb-2">字典管理</h2>
        <div class="flex flex-wrap justify-between items-center pb-2 gap-2">
            <el-form :model="formModel" class="mb-4 flex flex-wrap items-end gap-4" inline label-suffix=":">
                <el-form-item label="字典名称" prop="typeName">
                    <el-input v-model="formModel.typeName" placeholder="请输入字典名称"/>
                </el-form-item>
                <el-form-item label="字典描述" prop="description">
                    <el-input v-model="formModel.description" placeholder="请输入其他描述"/>
                </el-form-item>
                <el-form-item label="字典状态" label-width="80px" prop="status">
                    <el-select v-model="formModel.status" :fit-input-width="false" placeholder="全部"
                               style="width: 120px;">
                        <el-option :value="1" label="启用"/>
                        <el-option :value="0" label="禁用"/>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <template #default>
                        <el-button :icon="'Search'" type="primary" @click="search">搜索</el-button>
                        <el-button :icon="'Refresh'" plain type="info"
                                   @click="reset">重置
                        </el-button>
                    </template>
                </el-form-item>
            </el-form>
        </div>
        <div class="flex flex-wrap justify-between items-center pb-2 gap-2">
            <!-- 左侧操作 -->
            <div class="flex flex-wrap gap-2">
                <el-button
                    icon="Plus"
                    plain
                    type="primary"
                    @click="handleAdd"
                >
                    新增
                </el-button>
                <el-button
                    icon="Delete"
                    plain
                    type="danger"
                    @click="handleBatchDelete"
                >
                    批量删除
                </el-button>
            </div>
            <!-- 右侧工具 -->
            <div class="flex flex-wrap gap-2">
                <el-button icon="Refresh" @click="refresh">刷新</el-button>
                <!--                <el-button icon="Setting" link @click="openColumnSetting">列设置</el-button>-->
            </div>
        </div>
        <div>
            <el-table ref="tableRef" :data="page.records">
                <el-table-column label="字典名" prop="typeCode">
                    <template #default="{row}">
                        <el-button type="text" @click="handleClickType(row)">{{ row.typeCode }}</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-dialog ref="dialogRef" v-model="dialogVisibleModel.isVisible"
                   :lock-scroll="true" :on-closed="closed"
                   :title="dialogVisibleModel?.title" :width="dialogVisibleModel?.width">
            <router-view v-if="dialogVisibleModel?.isVisible" v-slot="{Component}">
                <component :is="Component"
                           :data="dialogVisibleModel?.data"
                           @cancel="close"
                           @submit="submit"/>
            </router-view>
        </el-dialog>
    </div>

</template>

<script setup>
import {computed, reactive, ref} from "vue";
import {useRouter} from 'vue-router';
import {ElMessage, ElMessageBox} from "element-plus";
import instance from "@/api/request.js";

const router = useRouter();

onMounted(() => {
    search();
});
const page = reactive({
    records: []
})
const search = () => {
    instance.post("/dict/list", {
        current: 1,
    }).then(res => {
        Object.assign(page, res.data)
    })
}
const reset = () => {
}
const formModel = reactive({})

const handleAdd = () => {
    router.push("/dict/add").then(() => {
        Object.assign(dialogVisibleModel, {
            isVisible: true,
            option: router.currentRoute.value.meta.perms,
            title: router.currentRoute.value.meta.title,
        });
    })
}

const handleBatchDelete = () => {

}
const refresh = () => {
}

const dialogRef = ref();

const dialogVisibleModel = reactive({
    isVisible: false,
    option: null,
    title: '模态框',
    width: '800px',
    data: null
})

const submit = () => {
    close();
}

const close = () => {
    dialogVisibleModel.isVisible = false;
    router.push("/dict")
}
const closed = () => {
    dialogVisibleModel.width = '800px'
}

const handleClickType = (row)=>{
    router.push(`/dict/item/${row.typeCode}`)
}
</script>

<style lang="scss" scoped>
:deep(.el-table) .table-header, :deep(.el-table) .table-header-row {
    color: #0f0f0f;
    font-weight: bold;
    background-color: #f0f0f0
}

:deep(.el-table) :deep(.el-table__header) {
    background-color: #0005f5;
}
</style>